<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史投票页面</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.17/css/layui.min.css">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="<c:url value="/js/jquery-3.7.1.min.js"/>"></script>
    <style>
        body {
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: #333;
        }

        .header {
            background-color: #ffffff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            padding: 16px 30px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header {
            background-color: #ffffff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 15px 30px;
            display: flex;
            align-items: center;
        }

        .header a {
            color: #333;
            margin-left: 25px;
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 15px;
        }

        .header a:hover {
            color: #1E9FFF;
        }

        .header > a:first-child {
            margin-left: 0;
        }

        .ml-auto {
            margin-left: auto;
        }

        .voteResult-container {
            padding: 30px 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .voteResult-card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .voteResult-header {
            padding: 25px 30px;
            border-bottom: 1px solid #f0f2f5;
        }

        .voteResult-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .voteResult-meta {
            display: flex;
            color: #666;
            font-size: 14px;
            gap: 20px;
        }

        .voteResult-meta-item {
            display: flex;
            align-items: center;
        }

        .voteResult-meta-item i {
            margin-right: 5px;
            color: #999;
        }

        .voteResult-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 15px;
        }

        .status-running {
            background-color: rgba(30, 159, 255, 0.1);
            color: #1E9FFF;
        }

        .status-not-started {
            background-color: rgba(126, 136, 149, 0.1);
            color: #7E8895;
        }

        .status-finished {
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }

        .status-deleted {
            background-color: rgba(220, 53, 69, 0.1);
            color: #676767;
        }

        .voteResult-body {
            padding: 30px;
        }

        .voteResult-description {
            color: #666;
            line-height: 1.8;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f2f5;
        }

        .options-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .options-title i {
            margin-right: 8px;
            color: #1E9FFF;
        }

        .options-container {
            margin-bottom: 30px;
        }

        .option-item {
            display: flex;
            align-items: flex-start;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #f0f2f5;
            margin-bottom: 15px;
            transition: all 0.2s ease;
        }

        .option-item:hover {
            border-color: #e6f2ff;
            background-color: #f8faff;
        }

        .option-radio {
            margin-top: 3px;
        }

        .layui-form-radio {
            margin-right: 20px;
        }

        .option-content {
            flex-grow: 1;
        }

        .option-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .option-image {
            max-width: 200px;
            max-height: 150px;
            border-radius: 8px;
            margin-top: 10px;
            border: 1px solid #f0f2f5;
        }

        .voteResult-footer {
            padding: 20px 30px;
            background-color: #f8f9fa;
            display: flex;
            justify-content: flex-end;
            border-top: 1px solid #f0f2f5;
        }

        .layui-btn {
            background-color: #1E9FFF;
            border-radius: 8px;
            padding: 0 24px;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .layui-btn:hover {
            background-color: #0d87e6;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 159, 255, 0.3);
        }

        .voteResult-selection {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #f0f2f5;
        }

        .selection-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .progress-container {
            margin-top: 10px;
        }

        .progress-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .progress-label {
            width: 200px;
            font-size: 14px;
            color: #666;
        }

        .progress-bar-container {
            flex-grow: 1;
            height: 8px;
            background-color: #f0f2f5;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background-color: #1E9FFF;
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .progress-percentage {
            width: 60px;
            text-align: right;
            font-size: 14px;
            font-weight: 500;
            color: #1E9FFF;
            margin-left: 15px;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            padding-top: 20px;
            border-top: 1px solid #f0f2f5;
        }

        .layui-btn-primary {
            background-color: #fff;
            border: 1px solid #e0e2e5;
            color: #666;
        }

        .layui-btn-primary:hover {
            border-color: #1E9FFF;
            color: #1E9FFF;
            background-color: #fff;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .voteResult-container {
                padding: 20px 15px;
            }

            .voteResult-header,
            .voteResult-body,
            .voteResult-footer {
                padding: 20px 15px;
            }

            .voteResult-title {
                font-size: 20px;
            }

            .voteResult-meta {
                flex-wrap: wrap;
                gap: 10px 15px;
            }

            .option-item {
                padding: 15px;
            }

            .option-image {
                max-width: 100%;
                margin-top: 10px;
            }

            .progress-label {
                width: 120px;
            }
        }
    </style>
</head>
<body>
<nav class="header">

    <c:if test="${person.level == 1}">
        <a href="${pageContext.request.contextPath}/person/index" class="flex items-center">
            <i class="fa fa-home text-primary text-xl mr-2"></i>
            <span class="font-bold text-lg">用户首页</span>
        </a>
        <a href="${pageContext.request.contextPath}/admin/index" class="flex items-center">
            <i class="fa fa-home text-primary text-xl mr-2"></i>
            <span class="font-bold text-lg">管理员首页</span>
        </a>
    </c:if>
    <c:if test="${person.level == 0}">
        <a href="${pageContext.request.contextPath}/person/index" class="flex items-center">
            <i class="fa fa-home text-primary text-xl mr-2"></i>
            <span class="font-bold text-lg">用户首页</span>
        </a>
    </c:if>

    <div class="ml-auto flex items-center">
        <c:if test="${person == null}">
            <a href="${pageContext.request.contextPath}/views/login.jsp"><i class="fa fa-user-circle mr-2"></i>请先登录</a>
        </c:if>
        <c:if test="${person != null}">
            <a href="${pageContext.request.contextPath}/admin/person/editPerson?pid=${person.pid}"><i
                    class="fa fa-user-circle mr-2"></i>${person.username}</a>
            <a href="${pageContext.request.contextPath}/history/show">投票历史</a>
            <a href="${pageContext.request.contextPath}/views/relation.jsp">联系管理员</a>
        </c:if>
        <a href="javascript:void(0);" onclick="logout()">退出登录</a>
    </div>
</nav>

<div class="voteResult-container">
    <!-- 投票主题1 -->
    <div class="voteResult-card">
        <div class="voteResult-header">
            <div class="voteResult-title">
                ${voteResult.topAndOpt.topic.title}
                <%-- 需要单独机型判断 --%>
                <c:if test="${voteResult.topAndOpt.topic.status} == 0">
                    <span class="voteResult-status status-not-started ">未开始</span>
                </c:if>
                <c:if test="${voteResult.topAndOpt.topic.status} == 1">
                    <span class="voteResult-status status-running">进行中</span>
                </c:if>
                <c:if test="${voteResult.topAndOpt.topic.status} == 2">
                    <span class="voteResult-status status-ended">已结束</span>
                </c:if>
            </div>
            <div class="voteResult-meta">
                <div class="voteResult-meta-item"><i class="fa fa-user"></i>
                    创建者： ${voteResult.topAndOpt.topic.author}</div>
                <div class="voteResult-meta-item"><i class="fa fa-calendar"></i> ${voteResult.topAndOpt.topic.beginDate}
                    至 ${voteResult.topAndOpt.topic.endDate}</div>
                <div class="voteResult-meta-item"><i class="fa fa-users"></i> 参与人数：${voteResult.count}人</div>
            </div>
        </div>
        <div class="voteResult-body">
            <div class="voteResult-description">
                ${voteResult.topAndOpt.topic.desc}
            </div>

            <div class="options-title"><i class="fa fa-list-ul"></i> 候选列表</div>
            <div class="options-container">

                <form class="layui-form" action="${pageContext.request.contextPath}/vote/save" method="post">
                    <input style="display: none" value="${voteResult.topAndOpt.topic.tid}" name="tid">
                    <c:forEach var="option" items="${voteResult.topAndOpt.options}" varStatus="status">

                        <div class="option-item">
                            <div class="option-radio">
                                <c:if test="${voteResult.isVote == option.oid }">
                                    <input type="radio" checked name="oid" value="${option.oid}"
                                           data-title="${option.name}"
                                           class="layui-form-radio" disabled>
                                </c:if>
                                <input type="radio" name="oid" value="${option.oid}" disabled
                                       data-title="${option.name}"
                                       class="layui-form-radio">

                            </div>
                            <div class="option-content">
                                <div class="option-name">${option.name}</div>
                                <c:if test="${not empty option.url}">
                                    <img src="${pageContext.request.contextPath}${option.url}" alt="${option.name}"
                                         class="option-image">
                                </c:if>
                            </div>
                        </div>
                    </c:forEach>
                    <div class="form-actions">
                        <button type="button" class="layui-btn layui-btn-primary"
                                onclick="showResult(${voteResult.topAndOpt.topic.tid})">查看结果
                        </button>
                        <!-- 根据投票状态和用户权限动态显示按钮 -->
                        <c:if test="${voteResult.isVote == 0 && person.level == 0}">
                            <!-- 用户未投票且权限为0时显示可提交按钮 -->
                            <button type="submit" class="layui-btn">
                                <i class="fa fa-check-circle mr-2"></i>提交投票
                            </button>
                        </c:if>

                        <c:if test="${voteResult.isVote == 1 || person.level == 1}">
                            <!-- 用户已投票或权限为1时显示禁用按钮 -->
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-disabled" disabled>
                                <i class="fa fa-check-circle mr-2"></i>已提交投票
                            </button>
                        </c:if>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/layui/2.8.17/layui.min.js"></script>
<script>

    //查看结果
    function showResult(tid) {


        let content = ' <div style="padding: 20px;">';


        $.ajax({
            url: '${pageContext.request.contextPath}/vote/chart',
            data: {
                tid: tid
            },
            async: false,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                console.log(res)
                if (res.voteChars.length > 0) {
                    let data = res.voteChars;

                    for (let i = 0; i < data.length; i++) {
                        content += `
                            <div class="progress-item">
                                <div class="progress-label">` + data[i].name + `</div>
                                <div class="progress-bar-container">
                                    <div class="progress-bar" style="width: ` + (data[i].count / res.count) * 100 + `%"></div>
                                </div>
                                <div class="progress-percentage">` + data[i].count + `票</div>
                            </div>
                        `
                    }
                    content += '<div class="progress-item">'
                    content += '<div class="progress-label">总票数</div>'
                    content += '<div class="progress-bar-container">'
                    content += '<div class="progress-bar" style="width: 100%"></div>'
                    content += '</div>'
                    content += '<div class="progress-percentage">' + res.count + '票</div>'
                    content += '</div>'
                    content += '</div>'
                } else {
                    content += '<div class="progress-item">'
                    content += '<div class="progress-label">暂无投票数据</div>'
                    content += '</div>'
                    content += '</div>'
                }
                layer.open({
                    type: 1,
                    title: '当前投票结果',
                    area: ['600px', '400px'],
                    content: content
                });
            }, error: function (res) {
                layer.msg('诶呀，溜号了', {icon: 5})
            }
        })

    }


    // 退出登录
    function logout() {
        layer.confirm('确定要退出登录吗？', {
            icon: 3,
            title: '提示'
        }, function (index) {
            layer.msg('已成功退出登录', {icon: 1});
            setTimeout(function () {
                window.location.href = '${pageContext.request.contextPath}/logout';
            }, 1000);
            layer.close(index);
        });
    }
</script>
</body>
</html>